<template>
  <router-view></router-view>
  <el-main>
    <el-row class="flv_box">
      <video id="myvideo" controls autoplay></video>
    </el-row>
    <el-row class="detial">
      <el-col>
        <span style="font-weight: bold; font-size: large"
          >视频名称：{{ videoName }}</span
        >
      </el-col>
      <el-col>
        <el-button type="text" @click="deleteVideo">删除</el-button>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
import flv from "flv.js";
import store from "@/store";
import { request } from "@/network/request";

export default {
  name: "VideoDetail",
  data() {
    return {
      videoName: "",
      videoSrc: "",
      player: null,
      playing: false,
      isManager: 0
    };
  },
  methods: {
    deleteVideo() {
      let url = "/api/file/deleteVideo/";
      let postForm = new FormData();
      postForm.append("filePath", this.videoSrc);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          request({
            url: url,
            method: "post",
            data: postForm
          }).then(res => {
            if (res.data.code === "200") {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.$router.go(-1);
            } else if (res.data.code === "400") {
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  created() {
    this.videoName = this.$route.params.videoName;
    this.videoSrc = this.$route.params.videoSrc;
    this.isManager = store.getters.userInfo.isManager;
  },
  mounted() {
    if (flv.isSupported()) {
      this.player = flv.createPlayer({
        // type: 'flv',
        type: "video/mp4",
        url: this.videoSrc
      });
      // console.log(this.player);
      let video = document.querySelector("#myvideo");
      this.player.attachMediaElement(video);
      this.player.load();
      // console.log(this.player);
    }
  }
};
</script>

<style>
.flv_box {
  width: 100%;
  height: 80%;
}

#myvideo {
  width: 100%;
  height: 100%;
}

.detial {
  /*padding-top: 10px;*/
  /*height: 20%;*/
}
</style>
